<template>
    <div class="table-container">
        <div class="date-picker">
            <div>统计日期段:</div>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" />
        </div>
        <el-table :data="tableData" style="width: 100%" class="table" max-height="900" @row-click="handleRowClick">
            <el-table-column prop="userName" label="姓名" min-width="100" align="center" />
            <el-table-column prop="assessmentIssues" label="过程考核问题" min-width="100" align="center" />
            <el-table-column prop="storehouseIssues" label="油库自查问题" min-width="100" align="center" />
            <el-table-column prop="safetyPoints" label="安全积分情况" min-width="100" align="center" />
            <el-table-column prop="storehousePoints" label="油库积分情况" min-width="100" align="center" />
            <el-table-column prop="fine" label="扣罚情况" min-width="100" align="center" />
        </el-table>
        <el-pagination :background="true" :current-page="pageable.pageNum" :page-size="pageable.pageSize"
            :page-sizes="[10, 25, 50, 100]" :total="pageable.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="getData" @current-change="getData" style="margin-top: 20px;"></el-pagination>
        <PersonRecDetailDia :user-id="rowUserId" ref="personRecDetailDiaRef"></PersonRecDetailDia>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import PersonRecDetailDia from '@/components/personRecDetailDia.vue';
// import { getDetail } from '@/api/index.ts';

const dateRange = ref<string[]>([]);

interface tableDataType {
    userName?: string,
    assessmentIssues?: string,
    storehouseIssues?: string,
    safetyPoints?: string,
    storehousePoints?: string,
    fine?: string,
    id?: string
}
const tableData = ref<tableDataType[]>([
    {
        userName: '张三',
        assessmentIssues: '油库自查问题1',
        storehouseIssues: '油库自查问题2',
        safetyPoints: '安全积分情况1',
        storehousePoints: '油库积分情况1',
        fine: '扣罚情况1',
        id: '1'
    },
    {
        userName: '李四',
        assessmentIssues: '油库自查问题2',
        storehouseIssues: '油库自查问题3',
        safetyPoints: '安全积分情况2',
        storehousePoints: '油库积分情况2',
        fine: '扣罚情况2',
        id: '2'
    },
    {
        userName: '王五',
        assessmentIssues: '油库自查问题3',
        storehouseIssues: '油库自查问题4',
        safetyPoints: '安全积分情况3',
        storehousePoints: '油库积分情况3',
        fine: '扣罚情况3',
        id: '3'
    },

])

interface Pageable {
    pageNum: number,
    pageSize: number,
    total: number
}
const pageable = ref<Pageable>({
    pageNum: 1,
    pageSize: 10,
    total: 0
})


function getData() {
    // getDetail(id.value).then(res=>{
    //     this.tableData = res.data
    // })
}
const router = useRouter()

const rowUserId = ref<string>('')
const personRecDetailDiaRef = ref()
function handleRowClick(row: tableDataType) {
    console.log('row', row);
    rowUserId.value = row.id as string
    personRecDetailDiaRef.value.dialogVisible = true
    // const targetUrl = router.resolve({ path: "/personRecDetail", query: { id: row.id, } }).href;
    // window.open(targetUrl, '_blank');
}

const route = useRoute()
const userId = ref<string>('')
onMounted(() => {
    userId.value = route.query.id as string
    // 实际数据请求
    if (userId.value) {
        getData();
    }
})

</script>

<style scoped lang="scss">
.table-container {
    margin-top: 20px;
    position: relative;

    .date-picker {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 0 5px;
        left: 20px;
        top: -50px;

        :deep(.el-date-editor) {
            width: 205px;

        }

        :deep(.el-date-editor .el-range-separator) {
            color: #fff;
        }

        :deep(.el-date-editor .el-range-input) {
            color: #fff;
            line-height: 32px;
        }
    }
}
</style>